<template>
  <el-scrollbar style="height:100%;">
    <el-row style="min-width:1280px;">
      <el-col :span="24" class="marginBottom8">
        <Portlet>
          <el-form ref="searchForm" class="el-form-col el-form-s search-form" :model="search">
            <el-row :gutter="15" style="position:relative;">

              <el-col :span="4" style="position: absolute">
                <el-form-item prop="orderNo">
                  <el-input v-model="search.orderNo" type="textarea" :rows="4" placeholder="订单号  (支持多单查询，用英文逗号分隔)"
                            clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" :offset=4>
                <el-form-item prop="consigneeName">
                  <el-input v-model="search.consigneeName" placeholder="客户姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="consigneePhone">
                  <el-input v-model="search.consigneePhone" placeholder="客户电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="serviceProvider">
                  <el-input v-model="search.serviceProvider" placeholder="服务方"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="serviceProviderPhone">
                  <el-input v-model="search.serviceProviderPhone" placeholder="服务方电话"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-col>

              <el-col :span="4" :offset="4">
                <el-form-item prop="addressArr">
                  <CascadeAddress v-model="search.addressArr" :level="3" changeOnSelect placeholder="客户地址：省/市/区" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="businessNo">
                  <el-select v-model="search.businessNo" filterable placeholder="业务类型">
                    <el-option v-for="item in businessArr"
                               :key="item.value"
                               :label="item.text"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="serviceNo">
                  <el-select v-model="search.serviceNo" filterable placeholder="服务类型">
                    <el-option v-for="item in serviceArr"
                               :key="item.value"
                               :label="item.text"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="startFoundDate">
                  <el-date-picker type="date"
                                  placeholder="下单开始时间"
                                  v-model="search.startFoundDate"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="endFoundDate">
                  <el-date-picker type="date"
                                  placeholder="下单结束时间"
                                  v-model="search.endFoundDate"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-collapse-transition>
              <div v-show="isOpen">
                <el-row :gutter="15">
                  <el-col :span="4">
                    <el-form-item prop="colorFlag">
                      <el-select v-model="search.colorFlag" filterable placeholder="订单标记">
                        <el-option v-for="item in colorArr"
                                   :key="item.value"
                                   :label="item.text"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- todo 中标时间 后端未设定参数
                  <el-col :span="4">
                    <el-form-item prop="startFoundDate">
                      <el-date-picker type="date"
                                      placeholder="中标开始时间"
                                      v-model="search.startFoundDate"
                                      value-format="yyyy-MM-dd"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item prop="endFoundDate">
                      <el-date-picker type="date"
                                      placeholder="中标结束时间"
                                      v-model="search.endFoundDate"
                                      value-format="yyyy-MM-dd"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  -->
                </el-row>
              </div>
            </el-collapse-transition>
          </el-form>
        </Portlet>
      </el-col>
      <el-col :span="24" class="marginBottom8">
        <el-card class="icon-allow">
          <div class="text-center div-sort" style="display: table">
            <div style="width: 100px;" class="cell-center" @click.prevent="orderByFoundtime" :class="{'icon-allow-bg': isShowOrderFound}">
              下单日期
              <img class="icon-allow-img" v-if="isShowOrderFound" :src="isOrderByFoundtime ? '/static/images/faHuoBao/arrow-up.png': '/static/images/faHuoBao/arrow-down.png'" />
            </div>
            <div class="clearfix"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="marginBottom8">
        <table class="order-table">
          <tr v-for="(item, index) in tableData" :key="index">
            <td align="center" style="padding-left: 5px;">
              <input type="checkbox" :checked="item.checked" @change="checkRow(item)" />
            </td>
            <td class="order-table-td">
              <table class="order-table-td-table">
                <tr class="tr-header">
                  <td width="30%" align="left" colspan="2">
                    订单号：<a @click="show(item)" >{{item.orderNo}}</a>
                    <span style="margin-left:10px;"><mark-template :id="item.id" :resultColor="item.colorFlag ? item.colorFlag : 'gray'"  @refresh="refresh"></mark-template></span>
                  </td>
                  <td width="20%" align="left">
                    服务方：{{item.serviceProvider}} （ {{item.serviceProviderPhone}} ）
                  </td>
                  <td width="25%" align="center">
                    {{item.business}} | {{item.service}}：<span class="font-orange font-weight500">{{item.orderState | filterDataBaseDictionary}}</span>
                  </td>
                  <td width="25%" align="center">
                    下单时间：{{item.foundTime}}
                  </td>
                </tr>
                <tr class="tr-body">
                  <td>
                    <Upload-image :listItemStyle="listItemStyle" :showPictureNum="true" :readonly="true" :value="handleJsonStringArr(item.imgAddress)"></Upload-image>
                  </td>
                  <td>
                    <div>
                      <div class="marginBottom8">
                        商品名称：<truncate :value="item.goodsName" :maxLength="10"></truncate>
                      </div>
                      <div class="marginBottom8">
                        商品数量：{{item.goodsSum}}套
                      </div>
                    </div>
                    <div class="clearfix"></div>
                  </td>
                  <td>
                    <div class="marginBottom8">
                      客户姓名：{{item.consigneeName}} {{item.consigneePhone}}
                    </div>
                    <div class="marginBottom8">
                      客户地址：<truncate :value="item.consigneeProvince + item.consigneeCity + item.consigneeDistrict + item.consigneeAddress" :maxLength="24"></truncate>
                    </div>
                  </td>
                  <td align="center">
                    <div class="marginBottom8">
                      <span class="font-red" style="font-size: 24px; font-weight: bold;">￥{{item.payMoneyTotal}}</span>
                    </div>
                    <div class="marginBottom8">
                      应付总额
                    </div>
                  </td>
                  <td align="center">
                    <div>
                      <el-button type="primary" plain style="width: 120px;" @click="showOffer(item)"> 支  付 </el-button>
                    </div>
                    <div>
                      <el-button type="text" @click="newCancelOffer(item)">取消订单</el-button>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <el-col :span="24">
          <Pagination style="margin-top: 20px" class="pull-right" :total-item="totalItem" @pagination="pagination" @sizeChange="sizeChange" :perItem="params.pageSize"></Pagination>
        </el-col>
        <div class="clearfix"></div>
      </el-col>
      <el-col :span="24" class="div-payment-buttom-button">
        <table style="width: 100%;">
          <tr>
            <th width="10%">
              <label><input type="checkbox" @change="checkAll" :checked="isCheckAll" /> 全选</label>
            </th>
            <th width="10%">
              <a class="ladda-button" data-style="zoom-out" @click="newPutBackSome($event)">取消订单</a>
            </th>
            <th width="15%">
            </th>
            <th width="15%">
              <span>已选订单：<span class="font-red">{{checkedRow.length}}</span> 单</span>
            </th>
            <th width="15%">
              <span>合计：<span class="font-red">{{checkedPrice|decimalNumFilter}}</span> </span>
            </th>
            <th width="120px">
              <div style="margin: 0 15px 0 15px;">
                <el-button type="primary" @click.prevent="mergePay">合并付款</el-button>
              </div>
            </th>
          </tr>
        </table>
      </el-col>
    </el-row>
    <cancelOrderModal :visible.sync="showCancelOrder" :cancelId="cancelId"></cancelOrderModal>
  </el-scrollbar>
</template>
<script>
import {alert, copy, dotData, merge, handleJsonStringArr, arrayColumn} from '@/utils'
import {filterSecond, filterDataBaseDictionary, unixTimestampFilter, decimalNumFilter, filterDayHours} from '@/filters'
import {getFhbBsteType, getFhbServiceType} from '@/utils/selectOptions'
import markTemplate from '@/components/markTemplate'
import cancelOrderModal from '@/views/fhb/myOrders/components/modal/cancelOrderModal'
export default {
  name: 'myOrdersOfferingIndex',
  components: {
    markTemplate,
    cancelOrderModal
  },
  filters: {
    filterSecond,
    filterDataBaseDictionary,
    unixTimestampFilter,
    filterDayHours
  },
  data() {
    return {
      listItemStyle: {
        width: '120px',
        height: '90px'
      },
      searchLoading: false,
      params: {
        pageSize: 5,
        pageNum: 1
      },
      totalItem: 0,
      tableData: [],
      businessArr: [],
      serviceArr: [],
      colorArr: [
        {text: '红色', value: 'red'},
        {text: '橙色', value: 'orange'},
        {text: '黄色', value: 'yellow'},
        {text: '绿色', value: 'green'},
        {text: '蓝色', value: 'blue'}
      ],
      search: {
        orderState: '1',
        orderNo: '',
        consigneeName: '',
        consigneePhone: '',
        businessNo: '',
        serviceNo: '',
        isAbnormal: '',
        colorFlag: '',
        startFoundDate: '',
        endFoundDate: '',
        addressArr: [],
        biddersSumOb: '',
        foundtimeOb: '',
        serviceProvider: '',
        serviceProviderPhone: ''
      },
      rows: [],
      isOpen: false,
      isOrderByPeopleNumber: false,
      isOrderByFoundtime: false,
      isShowOrderPeople: false,
      isShowOrderFound: false,
      showCancelOrder: false,
      cancelId: [],
      isCheckAll: false,
      checkedRow: []
    }
  },
  computed: {
    // checkedRow() {
    //   // 选中的数据
    //   let temp = []
    //   this.tableData.forEach(v => {
    //     if (v.checked) {
    //       temp.push(v)
    //     }
    //   })
    //   return temp
    // },
    checkedPrice() {
      let totalPrice = 0
      this.checkedRow.forEach(v => {
        totalPrice += Number(v.payMoneyTotal) || 0
      })
      return totalPrice
    }
  },
  created() {
    // 发货宝业务类型
    getFhbBsteType().then(data => {
      this.businessArr = data
    })
    // 服务类型
    getFhbServiceType().then(arr => {
      this.serviceArr = arr
    })
    // 获取data
    this.getTableData()
  },
  methods: {
    handleJsonStringArr,
    unixTimestampFilter,
    decimalNumFilter,
    handleClick() {
      this.searchFunc()
    },
    pagination(page) {
      this.params.pageNum = page
      this.searchFunc()
    },
    sizeChange(size) {
      this.params.pageSize = size
      this.searchFunc()
    },
    show(data) {
      this.$router.push({path: '/ss-fhb/myOrders/pending/show/' + data.id})
    },
    searchFunc() {
      this.getTableData()
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.getTableData()
    },
    selectionChange(rows) {
      this.checkedRow = rows
      if (this.checkedRow.length === this.tableData.length) {
        this.isCheckAll = true
      } else {
        this.isCheckAll = false
      }
    },
    refreshCheckedRows() {
      this.checkedRow = []
      this.tableData.forEach(v => {
        if (v.checked) {
          this.checkedRow.push(v)
        }
      })
      if (this.checkedRow.length === this.tableData.length) {
        this.isCheckAll = true
      } else {
        this.isCheckAll = false
      }
    },
    checkAll() {
      this.isCheckAll = !this.isCheckAll
      this.tableData.forEach(v => {
        this.$set(v, 'checked', this.isCheckAll)
      })
      this.refreshCheckedRows()
    },
    // 单选
    checkRow(item) {
      this.$set(item, 'checked', !item.checked)
      this.refreshCheckedRows()
    },
    // reset 重置搜索框
    reset(searchForm) {
      this.$refs.searchForm.resetFields()
    },
    getTableData() {
      let data = copy(this.search, true)
      data = merge(data, this.params)
      // 处理地址
      data.provinceNo = dotData(data.addressArr, '[0]') || ''
      data.cityNo = dotData(data.addressArr, '[1]') || ''
      data.districtNo = dotData(data.addressArr, '[2]') || ''
      delete data.addressArr
      this.$ajax.table('/ms-fahuobao-json-view/FhbOrder/findFhbOrderAll', data).then(response => {
        this.tableData = response.data || []
        this.totalItem = response.totalItem
        this.tableData.forEach(v => {
          v.imgAddress = handleJsonStringArr(v.imgAddress)
          v.checked = false
        })
      })
    },
    // 排序
    orderByPeopleNumber() {
      this.isShowOrderPeople = true
      this.isShowOrderFound = false
      this.params.foundtimeOb = ''
      if (this.isOrderByPeopleNumber) {
        this.isOrderByPeopleNumber = false
        this.params.biddersSumOb = 1
      } else {
        this.isOrderByPeopleNumber = true
        this.params.biddersSumOb = 2
      }
      this.getTableData()
    },
    orderByFoundtime() {
      this.isShowOrderPeople = false
      this.isShowOrderFound = true
      this.params.biddersSumOb = ''
      if (this.isOrderByFoundtime) {
        this.isOrderByFoundtime = false
        this.params.foundtimeOb = 1
      } else {
        this.isOrderByFoundtime = true
        this.params.foundtimeOb = 2
      }
      this.getTableData()
    },
    // 详情 tabIndex： 1 报价详情 4 订单详情
    showOffer(data) {
      this.$router.push({path: '/ss-fhb/myOrders/pending/payment/' + data.id, query: {bid: data.biddingLogId}})
    },
    // 取消竞价
    newCancelOffer(item) {
      this.cancelId = [item.id]
      this.showCancelOrder = true
    },
    // 批量 取消订单
    newPutBackSome() {
      if (this.checkedRow.length > 0) {
        this.cancelId = arrayColumn(this.checkedRow, 'id')
        this.showCancelOrder = true
      } else {
        alert('请选择数据')
      }
    },
    // 合并支付
    mergePay() {
      if (this.checkedRow.length > 0) {
        let orderNoStr = ''
        orderNoStr = arrayColumn(this.checkedRow, 'orderNo').join(',')
        console.log(orderNoStr, 'orderNoStr')
        this.$router.push({path: '/ss-fhb/myOrders/mergePay/' + orderNoStr})
      } else {
        alert('请选择数据')
      }
    }
  }
}
</script>
